<style>
    body{

        background-image:url(/src/image/bg-3.jpg);

    }
</style>
<!--<link rel="stylesheet" href="src/js/sweetalert/sweetalert.css">-->
 <navbar></navbar>
<div style="margin-top: 50px">
<section style="margin-top:60px">

    <div class="btn-group btn-group-justified" role="group" aria-label="...">
        <div class="btn-group" role="group" ng-repeat="ft in vm.foodTypes track by $index">
            <button type="button" class="btn btn-default" ng-click="vm.getFoodListByFoodType(ft.type)">{{ft.type}}</button>
        </div>
    </div>

    <div class="row panel-normal">

        <div class="col-md-3 panel-tab" ng-repeat="food in vm.foodList track by $index">
            <a class="flying" class="thumbnail" ng-click="vm.addShoppingCart($index)">
                <img ng-src="{{food.img}}" alt="" class="img-normal-size-center img-thumbnail">
                <p><span class="label label-default">{{food.name}}</span></p>
                <p><span class="label label-warning">价格：${{food.price}}</span></p>
            </a>
        </div>
    </div>

</section>
</div>
<cart></cart>
<script type="text/javascript" src="../../../src/js/login/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../src/js/fly/jquery.fly.min.js"></script>
<script type="text/javascript" src="../../../src/js/fly/requestAnimationFrame.js"></script>
<script>

    var addFlyAnimate = function(from,to){
        var offset = $(to).offset();
        $(from).click(function(event){

            var addcar = $(this);
            var img = $(this).find('img').attr('ng-src');
            var flyer = $('<img class="u-flyer" src="'+img+'" style="width:60px;height:60px;">');

            //if(status.fly-img-status == 'true')
            {
                flyer.fly({
                    start: {
                        left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed
                        top: event.pageY //开始位置（必填）
                    },
                    end: {
                        left: offset.left+10, //结束位置（必填）
                        top: offset.top+10, //结束位置（必填）
                        width: 0, //结束时宽度
                        height: 0 //结束时高度
                    },
                    onEnd: function(){ //结束回调
                        $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息
                        addcar.css("cursor","default").removeClass('orange');//.unbind('click');
                        this.destory(); //移除dom
                    }
                });
            }


        });
    }

    $(function(){
        addFlyAnimate(".flying", ".cart-trigger");


        $(window).on("resize", function(e) {

            $(".flying").unbind("click");

            addFlyAnimate(".flying", ".cart-trigger");
        });

    });

</script>

